html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	font-family: "微软雅黑";	
	
}
input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;
}
textarea { -webkit-appearance: none;}
#wrap{
	position: relative;	
}
#bugTxt{
	position: fixed;
    left: 0;
    bottom: 5px;
    text-align: center;
    width: 100%;
    color: #999999;
    font-size: .8rem;
    display: none;
}
#xi{
	width: 20%;
    margin: 0 auto;
    display: block;
}
img{max-width: 100%;border: none;margin: 0;padding: 0;}
#allmap {
	width: 100%;
	height: 30%;
	overflow: hidden;
	margin:auto;
	font-family:"微软雅黑";
}
.swiper-pagination {
	position: fixed !important;
}
.left_hander{
	width: 10%;
    position: absolute;
    top: 30%;
    left: 10%;
}
div{
	background-size: cover !important;
}
#array {
	width: 20px;
	height: 15px;
    bottom:20px;
	left: 0px;	
	right: 0;
	margin: auto;
	position: fixed;
	z-index: 999;
	-webkit-animation: start 1.5s infinite ease-in-out;
}
#left_hander{
	-webkit-animation: left 1.5s infinite ease-in-out;
}
#swiper-container3{
	position: absolute;
	bottom: 5%;
	left: 0;
	right: 0;	
	margin:auto;
}
#swiper-container3 .swiper-wrapper .smallImg{
	width: 100% !important;
	/*height: 100px !important;*/
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	
}
#sec{
	position: relative;	
	background:url(../img/photobg/photobg0.jpg) no-repeat center center ;
}
#sec #secDivImg{
		position: absolute;
	/*z-index: -1;*/
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background:url(../img/invitation/smallImg0.jpg) no-repeat center center ;
	
}



.fir{
	background: url(../img/invitation/fir0.jpg) no-repeat center center;
	background-size: cover;
}
#img_fir{
	width: 80%;
	margin-top: -16%;
	float: right;
}

@-webkit-keyframes start {
	0%,
	30% {
		opacity: 0;
		-webkit-transform: translate(0, 10px);
	}
	60% {
		opacity: 1;
		-webkit-transform: translate(0, 0);
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(0, -8px);
	}
}

@-moz-keyframes start {
	0%,
	30% {
		opacity: 0;
		-moz-transform: translate(0, 10px);
	}
	60% {
		opacity: 1;
		-moz-transform: translate(0, 0);
	}
	100% {
		opacity: 0;
		-moz-transform: translate(0, -8px);
	}
}

@keyframes start {
	0%,
	30% {
		opacity: 0;
		transform: translate(0, 10px);
	}
	60% {
		opacity: 1;
		transform: translate(0, 0);
	}
	100% {
		opacity: 0;
		transform: translate(0, -8px);
	}
}
/*左滑小手*/
@-webkit-keyframes left {
	0%,
	30% {
		opacity: 0;
		-webkit-transform-origin-x: translate(0, 10px);
	}
	60% {
		opacity: 1;
		-webkit-transform-origin-x: translate(0, 0);
	}
	100% {
		opacity: 0;
		-webkit-transform-origin-x: translate(0, -8px);
	}
}

@-moz-keyframes left {
	0%,
	30% {
		opacity: 0;
		-webkit-transform-origin-x: translate(0, 10px);
	}
	60% {
		opacity: 1;
		-webkit-transform-origin-x: translate(0, 0);
	}
	100% {
		opacity: 0;
		-webkit-transform-origin-x: translate(0, -8px);
	}
}

@keyframes left {
	0%,
	30% {
		opacity: 0;
		-webkit-transform-origin-x: translate(0, 10px);
	}
	60% {
		opacity: 1;
		-webkit-transform-origin-x: translate(0, 0);
	}
	100% {
		opacity: 0;
		-webkit-transform-origin-x: translate(0, -8px);
	}
}

/*淡入动画*/
@-webkit-keyframes fadeIn {
	0% {
	opacity: 0; /*初始状态 透明度为0*/
	}
	50% {
	opacity: 0; /*中间状态 透明度为0*/
	}
	100% {
	opacity: 1; /*结尾状态 透明度为1*/
	}
}
@keyframes fadeIn{
	0% {
	opacity: 0; /*初始状态 透明度为0*/
	}
	50% {
	opacity: 0; /*中间状态 透明度为0*/
	}
	100% {
	opacity: 1; /*结尾状态 透明度为1*/
	}
}
@-moz-keyframes fadeIn{
		0% {
	opacity: 0; /*初始状态 透明度为0*/
	}
	50% {
	opacity: 0; /*中间状态 透明度为0*/
	}
	100% {
	opacity: 1; /*结尾状态 透明度为1*/
	}
}
@-ms-keyframes fadeIn{
		0% {
	opacity: 0; /*初始状态 透明度为0*/
	}
	50% {
	opacity: 0; /*中间状态 透明度为0*/
	}
	100% {
	opacity: 1; /*结尾状态 透明度为1*/
	}
}
/***********淡出动画************/
@keyframes fadeOut{
	0% {
	opacity: 1; /*初始状态 透明度为0*/
	}
	25%{opacity: 0.75;}
	50% {
	opacity: 0.5; /*中间状态 透明度为0*/
	}
	75%{opacity: 0.25;}
	100% {
	opacity: 0; /*结尾状态 透明度为1*/
	}
}


.openFadeIn{
	-webkit-animation: fadeIn 1s  ease-in-out;
	animation: fadeIn 1s  ease-in-out;
	-moz-animation: fadeIn 1s  ease-in-out;
	-ms-animation: fadeIn 1s  ease-in-out;
	
}
.openFadeOut{
	-webkit-animation: fadeOut 1s  ease-in-out;
	animation: fadeOut 1s  ease-in-out;
	-moz-animation: fadeOut 1s  ease-in-out;
	-ms-animation: fadeOut 1s  ease-in-out;
}

#img_inv{
	width: 40%;
    float: right;
    margin-top: 40%;
}


#thi{
	background: url(../img/flowbg.jpg) no-repeat center center;
}
.txt_p{padding: 0 15px;}
#audio_btn {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 200;
    display: none;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
}
.off {
    background-image: url(../img/normalmusic.svg);
    background-size: contain;
    background-repeat: no-repeat;
}
.rotate {
    -webkit-animation: rotating 1.2s linear infinite;
    -moz-animation: rotating 1.2s linear infinite;
    -o-animation: rotating 1.2s linear infinite;
    animation: rotating 1.2s linear infinite;
}
/*转圈音符*/
@keyframes rotating{	
	0% {
	    transform: rotate(0deg);
	}
	
	100% {
	    transform: rotate(360deg);
	}
}
@-moz-keyframes rotating{
		0% {
	    transform: rotate(0deg);
	}
	
	100% {
	    transform: rotate(360deg);
	}
}
@-ms-keyframes rotating{
		0% {
	    transform: rotate(0deg);
	}
	
	100% {
	    transform: rotate(360deg);
	}
}
@-webkit-keyframes rotating{
		0% {
	    transform: rotate(0deg);
	}
	
	100% {
	    transform: rotate(360deg);
	}
}
#info{
	background: #eeeeee;
}
#info_top{width: 100%;}

#info_div{
	position: absolute;
	top: 30%;
	left: 0;
	right: 0;
	margin: auto;
	width: 80%;
	z-index: 100;
}
.abs{position: absolute;
	top: 0;
}
.love{
	width: 70%;
	left: 0;
	animation: grow 0.7s 0.4s 1 ease, music-move 2s 3.3s infinite alternate ease-in-out;
    -webkit-animation: grow 0.7s 0.4s 1 ease, music-move 2s 3.3s infinite alternate ease-in-out;
    transform-origin: top;
    -webkit-transform-origin: top;
}
.heard{
	right: 15px;
	top: 15px !important;
	animation: grow 0.7s 0.4s 1 ease, music-move 1s 3.3s infinite alternate ease-in-out;
    -webkit-animation: grow 0.7s 0.4s 1 ease, music-move 1s 3.3s infinite alternate ease-in-out;
    transform-origin: bottom;
    -webkit-transform-origin: bottom;
}
/*摇摆的心型*/
@keyframes grow{
	
0% {
    -webkit-transform: scale(0);
    transform: scale(0);
}
60% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}

80% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}
100% {
    -webkit-transform: scale(1);
    transform: scale(1);
}
}
@keyframes music-move{
	0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
33% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
66% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
}
100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
}
.info_txt{
	position: absolute;
    top: 50%;
    padding: 0 5%;
    /*font-size: .4rem;*/
}
.txt_red{color: #fe6591;}
.info_txt p{
	margin-top: 10px;
	margin-bottom: 0;
}
.addr{
	font-size: .8rem;
}
.djstxt{
	color: darkblue;
	text-align: center;
}
#saveDate{
	width: 60%;
}
.thi{
	/*position: relative;*/
}
#formWrap{
	background: rgba(255,255,255,0.5);
    width: 85%; 
    z-index: 9999999999;
    padding: 10px 20px;
    box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    top: 10%; 
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    /*bottom: 0;*/ 
    
    
}
.inptxt{
	padding: 7px 0px 7px 5px;
    border: 1px solid lightpink;
    background: transparent;
    width: 65%;
    border-radius: 3px;
}
#msg{
	vertical-align: middle;
	resize: none;
}
#okBtn{
	background: rgba(234,107,109,1);
    border: none;
    color: white;
    width: 100%;
    padding: 5%;
    font-size: 1.1rem;
    border-radius: 5px;
}
.icon{
	list-style: none;
	display: inline-block;
	text-align: center;
	width: 24%;
}
.icon_img{
	width: 50%;
}
.thiUl{
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .8rem;
	position: absolute;
	bottom: 5%;
	left: 0;
	width: 100%;
}

.xinlang_animate {
    -webkit-animation: rotating 3.2s linear infinite;
    -moz-animation: rotating 3.2s linear infinite;
    -o-animation: rotating 3.2s linear infinite;
    animation: rotating 3.2s linear infinite;
}
.xinniang_animate{
	 -webkit-animation: rotating 4.5s linear infinite;
    -moz-animation: rotating 4.5s linear infinite;
    -o-animation: rotating 4.5s linear infinite;
    animation: rotating 4.5s linear infinite;
}
.daohang_animate{
	 -webkit-animation: rotating 3.5s linear infinite;
    -moz-animation: rotating 3.5s linear infinite;
    -o-animation: rotating 3.5s linear infinite;
    animation: rotating 3.5s linear infinite;
}
.tianqi_animate{
	 -webkit-animation: rotating 4s linear infinite;
    -moz-animation: rotating 4s linear infinite;
    -o-animation: rotating 4s linear infinite;
    animation: rotating 4s linear infinite;
}
.smallertxt{
	font-size: .85rem;
}
#myAlert{
	display: none;
    background: rgba(0,0,0,0.5);
    position: absolute;
    color: white;
    z-index: 1000;
    border-radius: 10px;
    padding: 15px;
    top: 10%;
    left: 0;
    right: 0;
    margin: auto;
    width: 50%;
    box-sizing: border-box;
    text-align: center;
}
.wea_date{font-size: .9rem;}
#weather{
	display: none;
	position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    background: rgba(0,0,0,0.8);
    color: white;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 30% 5% 10% 5%;  
    
}
#wea_content{
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .8rem;
	max-height: 80%;
	overflow-y: auto;
}
#wea_content .wea_item{
	list-style: none;
	
}
.wea_img{
	margin-left: 10px;
}
.wea_item{
	padding: 15px 0px;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.inlineBlock{
	display: inline-block;
}
.va_middle{
	vertical-align: middle;
}

.rightLine{
	padding: 5px 8px 5px 0px;
    border-right: 1px solid white;

}
#close{
	width: 15%;
    position: absolute;
    bottom: 2%;
    right: 2%;
	
}
.pl10{
	padding-left: 8px;
}
@media screen  and (max-width: 320px) {
	.djstxt{
		font-size: .9rem;
	}	
	.icon_img{
		width: 45%;
	}
	#saveDate{
		width: 50%;
	}
	.smallertxt{
		font-size: .6rem;
	}
	#okBtn{
		font-size: .9rem;
	}
	.txt_red{
		font-size: .8rem;
	}
	.addr{
		font-size: .7rem;
	}
	.thiUl{
		font-size: .65rem;
	}
}